<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.11.0.js"></script>
    <script src="gen.js"></script>
    <script>

        //makes a synchronous call to the page u and return the
        //result as object
        var x;
        function syncAjax(u){
            var obj=$.ajax(
                {url:u,
                    async:false
                }
            );
            return $.parseJSON(obj.responseText);

        }


        function edit(obj,id)
        {
            var r=get_household(id);

            if(r.result==0)
            {
                //show error message
                return;

            }

            //get the data from object r and put it in the form

            $("#household_id").prop("value", r.household.household_id);
            $("#household_no").prop("value", r.household.household_no);
            $("#household_head").prop("value", r.household.household_head);
            $("#discription").prop("value", r.household.discription);
            $("#community_id").prop("value", r.household.community_id);


            //show the form
            //find where the user clicked and store it in x and y
            var y=event.clientY;
            var x=event.clientX/2;
            //use x and y to set the location of the form
            $("#divEdit").css("top",y);
            $("#divEdit").css("left",x);
            //display the form
            $("#divEdit").fadeIn(600);
        }

        function add(obj)
        {
            $("#household_no").prop("value", "");
            $("#household_head").prop("value", "");
            $("#discription").prop("value", "");
            $("#community_id").prop("value", "");

            var y= event.clientY;
            var x= event.clientX/2;
            //use x and y to set the location of the form
            $("#divAdd").css("top",y);
            $("#divAdd").css("left",x);
            //display the form
            $("#divAdd").fadeIn(500);

        }


        function get_household(id)
        {
            x =id;
            var u="household_action.php?cmd=1&id="+id;

            return syncAjax(u);
        }



        //makes asynchronous call to the save page
        function save()
        {
            //complete the url
            var id = document.getElementById("household_id").value;
            var hn = document.getElementById("household_no").value;
            var hh = document.getElementById("household_head").value;
            var dp = document.getElementById("discription").value;
            var cd = document.getElementById("community_id").value;
            //var id =5;
            var u="household_action.php?cmd=3&id="+id
                +"&hn="+hn
                +"&hh="+hh
                +"&dp="+dp
                +"&cd="+cd;
            //fade out the form in half a second
            $("#divEdit").css("background-color","GG0000");
            $("#divEdit").fadeOut(500); // hides any html object
            alert("saved");
            location.reload();
            return syncAjax(u);
        }

        function delete_hs(obj,id)
        {
            var r=get_household(id);
            // alert(r);
            if(r.result==0){
                //show error message
                return;
            }

            //get the data from the object r and put it in the form
            $("#household_id").prop("value", r.household.household_id);
            $("#hh_number").prop("value", r.household.household_no);
            $("#comm").prop("value", r.household.community_id);
            //show the form
            //find where the user clicked and store it in x and y
            var y=event.clientY;
            var x=event.clientX/2;
            //use x and y to set the location of the form
            $("#divDelete").css("top",y);
            $("#divDelete").css("left",x);
            //display the form
            $("#divDelete").fadeIn(300);
        }

        function delete_hh()
        {

            //var cmid = document.getElementById("community_id").value;

            var u="household_action.php?cmd=5&hid="+x;
            alert(u);
            $("#divDelete").css("background-color","006600");
            $("#divDelete").fadeOut(500); // hides any html object
            alert("Deleted");
            location.reload();

            return syncAjax(u);

        }

        function save_add()
        {
            //complete the url
            var ahn=$("#h_number").val();
            var ahh=$("#h_head").val();
            var adp=$("#h_discription").val();
            var acd=$("#h_community").val();
            var u="household_action.php?cmd=4&ahn="+ahn+"&ahh="+ahh+"&adp="
                +adp+"&acd="+acd;
            alert(u);

            $.getJSON(u,saveDone);
            //reload
            window.location.reload();
            cancel_add();
        }

        function saveDone(data){

            alert(data);
        }
        function cancel_add()
        {
            $("#divAdd").fadeOut(500);
        }
        //hides the form
        function cancel(){
            //fade out the form in half a second
            $("#divEdit").css("background-color","GG0000");
            $("#divEdit").fadeOut(500); // hides any html object
        }
        function cancel_hs()
        {
            //fade out the form in half a second
            $("#divDelete").css("background-color","006600");
            $("#divDelete").fadeOut(500); // hides any html object
        }
    </script>

</head>
<body>
<table>
    <tr>
        <td colspan="2" id="pageheader">
            <h3>Health Information System</h3>
        </td>
    </tr>
    <tr>
        <td id="mainnav">
            <div class="menuitem">location</div>
            <div class="menuitem">opd cases</div>
            <div class="menuitem">health promotion</div>
            <div class="menuitem">nutrition</div>
            <div class="menuitem">child welfare</div>
            <div class="menuitem"><a href = 'service_view.php'>family planning</a></div>
        </td>

        <td id="content">
            <div id="divPageMenu">
                <span class="menuitem" >sub districts</span>
                <span class="menuitem" >communities</span>
                <span class="menuitem" >view map</span>
                <input type="text" id="txtSearch">
                <span class="menuitem">search</span>
            </div>
            <div id="divStatus" class="status">
                status message
            </div>
            <div id="divPageMenu">
                <span class="menuitem"><a href="school_view.php" >Schools Visits</a></span> |
                <span class="menuitem"><a href="household_view.php">Households Visits</a></span> |
                <span class="menuitem"><a href="community_members_view.php">Community Members</a></span> |
                <span class="menuitem"><a href="community_list.php">Communities</a></span> |
                <span class="menuitem"><a href="service_view.php">Family Planning Service</a></span>
            </div>
            <div id="divContent">
                <b><p align = "center">HOUSEHOLD VISITS</p></b>
                <span class='hotspot' onclick='add(this)'>Add Household</span>
                <table class="reportTable" width="100%" >
                    <tr class="header" >
                        <td>ID</td>
                        <td>Household Number</td>
                        <td>Household Head</td>
                        <td>Description</td>
                        <td>Community_id</td>
                        <td></td>
                        <td></td>
                    </tr>
            </div>
            <div id="divStatus" class="status">

            </div>
            <div id="divContent">
                <?php
                // including the schools class for method calls
                include_once("households.php");

                //call methods here to test
                $obj =  new households();
                if (!$obj->get_all_households())
                {
                    echo "error";
                    exit();
                }


                $row=$obj->fetch();
                $row_counter=0;
                while($row){

                    if($row_counter%2==0)
                    {
                        $style=" class='row1' ";
                    }
                    else
                    {
                        $style=" class='row2'  ";
                    }
                    $id=$row['household_id'];
                    echo "<tr $style >";
                    echo "<td>$id</td>";
                    echo "<td>$row[household_no]</td>";
                    echo "<td>$row[household_head]</td>";
                    echo "<td>$row[discription]</td>";
                    echo "<td>$row[community_id]</td>";
                    echo "<td><span class='hotspot' onclick='edit(this,$id)'>edit<span></td>";
                    echo "<td><span class='hotspot' onclick='delete_hs(this,$id)'>delete<span></td>";
                    echo "</tr>";
                    $row=$obj->fetch();
                    $row_counter++;
                }
                ?>
</table>
</div>
</td>
</tr>
</table>
<div id="divEdit" class = "popupForm">
    <table class="tableForm" >
        <tr>
            <td class="label">Household_no</td>
            <td class="field"><input type="text" value="<?php echo $row['household_no'] ?>" id="household_no" ></td>
        </tr>
        <tr>
            <td class="label">Household Head</td>
            <td class="field"><input type="text" value="" id="household_head" >
            </td>
        </tr>
        <tr>
            <td class="label">Description</td>
            <td class="field"><input type="text" value="" id="discription" >
            </td>
        </tr>
        <tr>
            <td class="label">Community_id</td>
            <td class="field"><input type="text" value="" id="community_id" >
            </td>
        </tr>
        <tr>
            <td class="label"></td>
            <td class="field">
                <input type="button" value="save" onclick="save()" >
                <input type="button" value="cancel" onclick="cancel()" >
            </td>
        </tr>
        <input type="hidden" value="<?php echo $row['household_id'] ?>" id ="household_id" >
    </table>
</div>
<div id="divAdd" class="popupForm">
    <table class="tableForm" >
        <tr>
            <td class="label">Household_no</td>
            <td class="field"><input type="text" value="" id="h_number" ></td>
        </tr>
        <tr>
            <td class="label">Household Head</td>
            <td class="field"><input type="text" value="" id="h_head" >
            </td>
        </tr>
        <tr>
            <td class="label">Description</td>
            <td class="field"><input type="text" value="" id="h_discription" >
            </td>
        </tr>
        <tr>
            <td class="label">Community_id</td>
            <td class="field"><input type="text" value="" id="h_community" >
            </td>
        </tr>
        <tr>
            <td class="label"></td>
            <td class="label">
                <input type="button" value="save" onclick="save_add()" >
                <input type="button" value="cancel" onclick="cancel_add()" >
            </td>
        </tr>
    </table>
</div>

<div id="divDelete" class = "popupForm">

    <table class="tableForm" >
        <tr>
            <div class="label">Are you sure you want to delete?</div>
            <td class="label">Household No</td>
            <td class="field"><input type="text" value="<?php echo $row['household_no'] ?>" id="hh_number" ></td>
        </tr>
        <tr>
            <td class="label">Community</td>
            <td class="field"><input type="text" value="" id="comm" >
            </td>
        </tr>
        <tr><td class="label"></td>
            <td class="field">
                <input type="button" value="Yes" onclick="delete_hh()" >
                <input type="button" value="No" onclick="cancel_hs()" >
            </td>
        </tr>
        <input type="hidden" value="<?php echo $row['household_id'] ?>" id ="household_id" >

    </table>

</div>
</body>
</html>